﻿Gamification of a LMS App (v7)
—————————————————————

The full-stack framework that we leveraged for the project is a MEAN stack.
MySQL, Express, Angular, and NodeJs.

The code is structured in a way to make it modular and easier to work with and extend.

All of the coding repositories used for this project are separated into 3 different directories. back-end (server application), front-end (client application), which are located in WebSite directory, and also Database directory which includes all of the queries to setup and use the database. 

It is highly recommended to create separate git repositories for front-end & back-end folders, so that deploying them to Heroku is easier.

—————————————————————
———————  front-end  ———————— 
—————————————————————
Angular have been used to create the front-end application. It uses Typescript, HTML & CSS as main programming language dependencies. 


Following are the describing front-end’s file & folder structure within and their sub-folders, as well as a short summary for each:

1. /src/app/ : In front-end directory under “/src/app/ “ there are 3 main folders as well as Angular’s app-routing, app module, app component. Please note that required authentication procedures are included mentioned files.
• /src/app/core :
• /services : Angular allows developers to define their own services, such as authentication services, back-end’s API communication services, etc. So later on, they could be called and used within any component in this modular Angular application.
• /models : includes interfaces to define custom user defined object models in Typescript, respective to their attributes as defined within the back-end subsystem.
• /helpers : includes code to make sure the user is logged in (auth.guard.ts), and to catch errors and jwt authentication.
• /src/app/modules : In each subfolder, is a routing module for handling the routes between components, a module to handle the component declarations (which are lazy loaded in the app-routing.module.ts routes), and the components themselves to handle front-end displaying and business logic.
• /admin : includes the source code of all component’s used to create admin’s views, as well as routing guide for admin pages (components). 
• /course : includes the source code of all component’s used to create course’s views, as well as routing guide for course pages (components). 
• /home : includes the source code of all common component’s among all user role’s within the application, such as course-library, home page, etc.
• /src/app/shared : This folder has the header and footer components which are displayed (shared) throughout every route in the LMS-FIU application.

2. /src/assets/ : This folder includes all of the visual assets as well as favicon, and loaded .js scripts. 
•  /src/assets/images : includes all visual assets used within the front-end application, such as logo, etc.
•  /src/assets/scripts : includes Youtube.js which is used to configure youtube player loaded within iframe in courses. 
• /src/assets/style : includes all .scss files used for styling, theming, as well as making responsive mobile-friendly layouts for all of the application components (used globally).

3. /src/environments/ : This directory includes the configuration for application URL’s (front-end & back-end) for both local and production environments. Please note that if you are trying to deploy the application to your own heroku domain, make sure to change the URL addresses’ in environment.prod.ts file.

*Notes about other files in front-end:
• src/app/app.component.ts : This file has included the Facebook authentication service (using npm package angularx-social-login) which stores the user in local storage for the app to authenticate them through the core/services/authentication.service.ts file.
• The server.js file is used in the client for the front-end to build and run on Heroku/AWS and Facebook. (make sure to use the local testing https server code in server.js and comment out the app.listen() code unless testing for production)

**Instructions to run the front-end application locally:
• To run the front-end, make sure you have installed the node packages by using 'npm install'
• Then, fix any packages by using 'npm audit fix'
• Finally, run using the angular cli with 'ng serve' 


—————————————————————
———————  back-end  ———————— 
—————————————————————
Node.js & Express.js have been used to create the back-end application.

Following are the describing back-end’s file & folder structure within and their sub-folders, as well as a short summary for each:

1. /app/  : under /app there are four main folders which help modularize the main file (server.js):
• /app/config : This folder contains the configuration details for the database (db.config.js) (and the Facebook application (keys.js) *Can be ignored for now).
• The database config setup for both Heroku and AWS is covered in the installation guide in this directory. Please reference it for setting up this file.	
• The Facebook app (keys.js) clientID and clientSecret where obtained from the creation of a Facebook app. https://developers.facebook.com/ 
• Also in this folder, passport-setup.js is included. This was used for testing authentication before the Facebook login was working and can be ignored.
• /app/models : The models are classes (like in Java or C++) which contain a constructor with properties obtained from the database's columns (fields) for a specific table. Also included are functions which provide access to certain data from the MySQL table using SQL queries and returning the result(s) (rows) to the controller. These should be created first (you may use previously created models as a reference).
• /app/controllers : The controllers import the model, and use functions to handle the requested data from the front-end and send back a response. Express is used with body-parser package to simplify the code for the requests and responses. (req, res). http://expressjs.com/  These should be created second (you may use the previously created controllers as a reference).
• /app/routes : The routes import the controllers and use their functions to create a RESTful API using Express.js. Endpoints are defined here for the front-end to call those endpoints and send and/or retrieve data. These should be created third (you may use the previously created routes as a reference).

2. server.js : The main file which starts the NodeJs/Express app, it should be written to when creating models/controllers/routes to require(import) the routes and passing in the express app for the routes files to use.(Look at the bottom-most requires (imports) of server.js). Import the routes when you are finished creating them here.

**Instructions to run the back-end application Locally:
• To run the back-end, first use 'npm install',
• then, 'npm audit fix',
• then, 'npm run dev'.


—————————————————————
———————  Database ———————— 
—————————————————————
				  
Finally, a description of handling the Database folder files will be provided:

• Make sure that you have access to a ClearDB MySQL server (Heroku add-on) for Heroku, or AWS RDS Database Server instance for AWS set up.
• First, make sure you have MySQL workbench (version 6.3) installed on your computer. (https://www.mysql.com/products/workbench/)
• Then, import & run all of the queries provided in the queries files in order: 'dump_01.sql', 'Views and Procedures_02.sql', 'groups_03.sql', and 'games_04.sql'.
• Lastly, refresh the database schema to make sure you have all of the tables & views successfully imported to your database instance. 
• This should get you up-to date with some data that was included for testing & demo, along with the Database Schema, Tables, Views, and Procedures.

